
import { useNavigate } from 'react-router-dom'
import React, { useEffect, useState } from 'react'
import '../../scss/use/window.scss'
import 'antd/dist/antd.min.css'

import ModifyPassw from './ModifyPassw'
import ThemeContext from '../public/ThemContext'
import EditMessage from './EditMessage'
import Bind from './Bind'
// import NavTop from '../../componen/NavTop'
function Main() {

    //传递值组件间的传值

    const [operate, setOperate] = useState<string>('资料')

    const navigate = useNavigate();
    // function Tologin() {
    //     navigate({ pathname: '/login' });
    // }
    // function Toregister() {
    //     navigate({ pathname: '/register' });
    // }
    // function ToPersonal() {
    //     navigate({ pathname: '/register' });
    // }
    //进入主页立即显示编辑资料弹框
    const [statu,setStatu]=useState<string>('block');
    function Fresh(e: React.MouseEvent<HTMLDivElement>){
        // e.stopPropagation();
        e.preventDefault();
        setStatu('none')
    }

    useEffect(function () {
           
    }, [])

    //点击修改对应的值
    function changePage(mypage:string) {
        setOperate(mypage);
    }

    return (
        <ThemeContext.Provider value={{ operate, setOperate }} >
            <div className="App">
                <header className="App-header">
                    {/* <button onClick={Tologin}>登录</button>
                    <button onClick={Toregister}>注册</button>
                    <button onClick={ToPersonal}>个人资料</button> */}
                </header>
                <div className="PopupWindow" style={{display:statu}}>
                    <div className="mask"></div>
                    <div className="dialog">
                        <div className="option">
                            <span className='choose' onClick={changePage.bind(null,"资料")}>资料</span>
                            <span onClick={changePage.bind(null,"绑定")}>绑定</span>
                            <span onClick={changePage.bind(null,"修改密码")}>修改密码</span>
                        </div>
                        <div className="personal">
                            <EditMessage />
                        </div>
                         <div className='bind'>
                            <Bind/>
                         </div>
                        {/* 修改密码 */}
                        <div className="modify">
                            <ModifyPassw />
                        </div>                       
                        <div className="del" onClick={Fresh} style={{display:statu}} >
                            +
                        </div>
                    </div>
                </div>
                {/* <HomePage/> */}
            </div>
        </ThemeContext.Provider>
    )
}
export default Main;


